import {useEffect, useRef} from "react";
import * as echarts from "echarts";

const LineCharts = () => {
    const chartRef = useRef(null);
    // 页面渲染完成后执行
    useEffect(() => {
        // 保证dom可用，在进行图表渲染
        // 1. 链接dom节点
        // 2. 初始化echarts实例
        const myChart = echarts.init(chartRef.current);
        // 3. 准备图标参数
        const option = {
            title: {
                text: '用户增长曲线'
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true
                }
            ]
        };
        // 4. 使用图表配置项渲染图表
        option && myChart.setOption(option);
    }, [])


    return (
        <div ref={chartRef} style={{width: '700px', height: '400px'}}></div>
    )
}

export default LineCharts